<template>
  <m-card>
    <!-- <view class="flex align-center cell">
      <image class="icon1" src="@/static/icon/detail-avatar.png"></image>
      <view class="c333 font28 h1">郭昊阳-13496521382</view>
    </view> -->
    <view class="flex align-center cell">
      <image class="icon2" src="@/static/icon/detail-dot.png"></image>
      <view class="c333 font28 h1">{{ option.tmf_time_range || time }}</view>
    </view>
    <view class="flex align-center cell" @click="mapHandler">
      <image class="icon3" src="@/static/icon/detail-map.png"></image>
      <view class="c333 font28 h1">{{ location }}</view>
    </view>

    <view class="mgt20 c999 font28">
      {{ option.tmi_desp }}
    </view>
  </m-card>
</template>

<script>
import dayjs from "dayjs";
export default {
  props: {
    option: {
      type: Object,
      default: () => ({}),
    },
  },

  computed: {
    location() {
      const { tmi_prov_name, tmi_city_name, tmi_region_name, tmi_address } =
        this.option;
      return tmi_prov_name + tmi_city_name + tmi_region_name + tmi_address;
    },

    time() {
      const { tmi_start_time, tmi_end_time } = this.option;
      if (!tmi_start_time) return "";
      return (
        dayjs(tmi_start_time).format("YYYY/MM/DD") +
        "-" +
        dayjs(tmi_end_time).format("MM/DD")
      );
    },
  },

  methods: {
    mapHandler() {
      if (this.option.tmf_inside_map) {
        // 室内地图，优先弹出
        const urls = [this.getImgUrl(this.option.tmf_inside_map)];
        uni.previewImage({
          urls: urls,
          current: 0,
        });
        return;
      }
      const lat = this.option.tmi_latitude || this.option.tmf_latitude
      const lng = this.option.tmi_longitude || this.option.tmf_longitude
      if(lat && lng) {
        uni.openLocation({
          longitude: +lng,
          latitude: +lat
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cell {
  &:not(:first-child) {
    margin-top: 20rpx;
  }
  .h1 {
    margin-left: 22rpx;
  }
  image {
    flex-shrink: 0;
  }
  .icon1 {
    width: 24rpx;
    height: 28rpx;
  }
  .icon2 {
    width: 28rpx;
    height: 28rpx;
  }
  .icon3 {
    width: 26rpx;
    height: 32rpx;
  }
}
</style>